<template>
  <div>
    <a-modal :title="JDtitle" v-model='visible' :width='800' v-dialogDrag :footer="null" :keyboard="false" :maskClosable="false" :closable='false'>
      <a-form-model :model='currentSelect' ref="currentSelect" :rules='currentSelectRules' :label-col="formItemLayoutJD.labelCol" :wrapper-col="formItemLayoutJD.wrapperCol">
         <a-row :gutter="8" v-if="activeKey==='node-attr'">
           <a-col :span='12'>
              <a-form-model-item label="服务调用序号" prop='callIndex' :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                <a-input v-model="currentSelect.callIndex" style="width: 100%;" :maxLength='4' @change="numberChange1" @blur="onBlur" placeholder='请输入4位的数字序号'/>
              </a-form-model-item>
           </a-col>
           <a-col :span='12'>
            <a-form-model-item label="服务调用描述" prop='callChannelImplDesc'>
              <a-input v-model="currentSelect.callChannelImplDesc" allow-clear :maxLength='256' placeholder='请输入服务调用描述'/>
            </a-form-model-item>
           </a-col>
           <a-col :span='24'>
            <a-form-model-item label="服务调用实现类" prop='callChannelImpl' :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <a-input v-model="currentSelect.callChannelImpl" allow-clear :maxLength='128' placeholder='请输入服务调用的完整实现类'/>
            </a-form-model-item>
           </a-col>
           <a-col :span='12'>
             <a-form-model-item label="服务调用模式" prop='channelCallMode'>
              <a-radio-group default-value="currentSelect.channelCallMode" v-model="currentSelect.channelCallMode">
                <a-radio-button value="0">应用内应用</a-radio-button>
                <a-radio-button value="1">微服务调用</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
           </a-col>
           <a-col :span='12'>
             <a-form-model-item label="订单登记标识" prop='registerPayOrderFlag'>
              <a-radio-group default-value="currentSelect.registerPayOrderFlag" v-model="currentSelect.registerPayOrderFlag">
                <a-radio-button value="Y">登记</a-radio-button>
                <a-radio-button value="N">不登记</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
           </a-col>
           <a-col :span='12'>
             <a-form-model-item label="服务调用方式" prop='syncCallFlag'>
              <a-radio-group default-value="currentSelect.syncCallFlag" v-model="currentSelect.syncCallFlag">
                <a-radio-button value="Y">异步调用</a-radio-button>
                <a-radio-button value="N">同步调用</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
           </a-col>
           <a-col :span='12'>
             <a-form-model-item label="调用结果是否影响交易" prop='impactTxnFlag' :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
              <a-radio-group default-value="currentSelect.impactTxnFlag" v-model="currentSelect.impactTxnFlag">
                <a-radio-button value="Y">影响</a-radio-button>
                <a-radio-button value="N">不影响</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
           </a-col>
           <a-col :span='12' v-show="currentSelect.syncCallFlag==='Y'">
             <a-form-model-item label="是否等待异步调用结果" prop='syncWaitResult' :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
              <a-radio-group default-value="currentSelect.syncWaitResult" v-model="currentSelect.syncWaitResult">
                <a-radio-button value="Y">等待</a-radio-button>
                <a-radio-button value="N">不等待</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
           </a-col>
           <a-col :span='12' v-show="currentSelect.syncCallFlag==='Y'">
              <a-form-model-item label="异步调用间隔类型" prop='syncQueryGapType'>
              <a-radio-group default-value="currentSelect.syncQueryGapType" v-model="currentSelect.syncQueryGapType">
                <a-radio-button value="0">等时长间隔</a-radio-button>
                <a-radio-button value="1">等幂间隔</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
           </a-col>
           <a-col :span='12' v-show="currentSelect.syncCallFlag==='Y'">
            <a-form-model-item label="异步调用时间间隔" prop='syncQueryRepeatTime'>
              <a-input-number v-model="currentSelect.syncQueryRepeatTime" style="width: 100%;" :min='0' placeholder='请输入异步查询时间间隔(秒)'/>
            </a-form-model-item>
           </a-col>
           <a-col :span='12' v-show="currentSelect.syncCallFlag==='Y'">
             <a-form-model-item label="异步调用次数" prop='syncQueryRepeat_num'>
              <a-input-number v-model="currentSelect.syncQueryRepeat_num" style="width: 100%;" :min='1' :max='99' placeholder='请输入2位的异步最大次数'/>
            </a-form-model-item>
           </a-col>
           <a-col :span='12' v-show="currentSelect.syncCallFlag==='Y'">
            <a-form-model-item label="异步调用结果处理服务类" prop='syncResultService_name' :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
              <a-input v-model="currentSelect.syncResultService_name" allow-clear :maxLength='64' placeholder='请输入异步调用结果处理类名'/>
            </a-form-model-item>
           </a-col>
           <a-col :span='12'>
             <a-form-model-item label="当前节点配置属性" prop='recordStatus'>
              <a-radio-group default-value="currentSelect.recordStatus" v-model="currentSelect.recordStatus">
                <a-radio-button value="Y">有效</a-radio-button>
                <a-radio-button value="N">无效</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
           </a-col>
         </a-row>
         <a-row :gutter="8" v-else-if="activeKey==='link-attr'">
           <a-col :span='12'>
             <a-form-model-item label="场景序号" prop='bizScene'>
            <a-input v-model="currentSelect.bizScene" style="width: 100%;" placeholder='请输入场景序号' @change="numberChange" allow-clear :maxLength='2'/>
          </a-form-model-item>
           </a-col>
           <a-col :span='12'>
             <a-form-model-item label="场景描述" prop='bizSceneDesc'>
            <a-input v-model="currentSelect.bizSceneDesc" @change="linkLabelChange" allow-clear :maxLength='128' placeholder='请输入场景描述'/>
          </a-form-model-item>
           </a-col>
         </a-row>
         <div class="btnSty">
           <a-button type="primary" @click="determine">确定</a-button>
           <a-button @click="cancel">取消</a-button>
         </div>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import '@/utils/directives'
export default {
  props: ['plumb', 'flowData', 'select'],
  data () {
    return {
      currentSelect: this.select,
      formItemLayoutJD: {
        labelCol: { span: 9 },
        wrapperCol: { span: 14 }
      },
      activeKey: '',
      currentSelectRules: {
        callChannelImpl: [
          { required: true, type: 'string', message: '请输入调用通道实现类', trigger: 'blur' }
        ],
        registerPayOrderFlag: [
          { required: true, message: '请选择登记支付订单标识', trigger: 'change' }
        ],
        channelCallMode: [
          { required: true, message: '请选择通道调用模式', trigger: 'change' }
        ],
        syncCallFlag: [
          { required: true, message: '请选择异步调用标识', trigger: 'change' }
        ],
        syncWaitResult: [
          { required: false, message: '请选择是否等待异步调用', trigger: 'change' }
        ],
        syncQueryGapType: [
          { required: false, message: '请选择异步查询间隔类型', trigger: 'change' }
        ],
        syncQueryRepeat_num: [
          { required: false, type: 'number', message: '请输入异步查询次数', trigger: 'blur' }
        ],
        syncQueryRepeatTime: [
          { required: false, type: 'number', message: '请输入异步查询时间间隔', trigger: 'blur' }
        ],
        syncResultService_name: [
          { required: false, type: 'string', message: '请输入异步调用结果', trigger: 'blur' }
        ],
        impactTxnFlag: [
          { required: true, message: '请选择调用失败是否影响交易', trigger: 'change' }
        ],
        recordStatus: [
          { required: true, message: '请选择当前节点状态', trigger: 'change' }
        ]
      },
      visible: false,
      JDtitle: '节点属性'
    }
  },
  methods: {
    linkLabelChange (e) {
      let label = e.target.value
      this.currentSelect.bizSceneDesc = label
      // 获取全部连线
      let allEle = this.plumb.getAllConnections()
      allEle.forEach((element, i) => {
        this.flowData.linkList.forEach((j, k) => {
          if (i === k) {
            if (label !== '') {
              element.setLabel({
                label: j.bizSceneDesc,
                cssClass: 'linkLabel'
              })
            } else {
              let labelOverlay = element.getLabelOverlay()
              if (labelOverlay) element.removeOverlay(labelOverlay.id)
            }
          }
        })
      })
    },
    // 确定
    determine () {
      this.$refs.currentSelect.validate(valid => {
        if (valid) {
          this.$message.success(this.JDtitle + '表单内容验证成功!')
          this.visible = false
          // this.activeKey = ''
        } else {
          this.visible = true
          this.$message.error(this.JDtitle + '表单内容验证失败!')
        }
      })
    },
    cancel () {
      this.visible = false
    },
    numberChange1 () {
      let patrn = /^(-)?\d+(\.\d+)?$/
      if (patrn.exec(this.currentSelect.callIndex) === null || this.currentSelect.callIndex === '') {
        this.currentSelect.callIndex = ''
        this.$message.error('只能输入数字！')
        return false
      } else {
        return true
      }
    },
    onBlur () {
      if (this.currentSelect.callIndex.length !== 4) {
        this.$message.error('服务调用序号长度不能小于四位！')
      }
    },
    numberChange () {
      let patrn = /^(-)?\d+(\.\d+)?$/
      if (patrn.exec(this.currentSelect.bizScene) === null || this.currentSelect.bizScene === '') {
        this.currentSelect.bizScene = ''
        this.$message.error('只能输入数字！')
        return false
      } else {
        return true
      }
    }
  },
  watch: {
    select (val) {
      this.currentSelect = val
      if (this.currentSelect.type === 'connScene' || this.currentSelect.type === 'connSuccess' || this.currentSelect.type === 'connFail' || this.currentSelect.type === 'connOvertime') {
        this.activeKey = 'link-attr'
        if (this.currentSelect.type === 'connScene') {
          this.JDtitle = '连线属性'
          this.visible = true
        }
      } else if (!this.currentSelect.type) {
        this.activeKey = ''
        this.visible = false
      } else if (this.currentSelect.type === 'common') {
        this.activeKey = 'node-attr'
        this.JDtitle = '节点属性'
        this.visible = true
      }
    },
    currentSelect: {
      handler (val) {
        this.$emit('update:select', val)
      },
      deep: true
    }
  }
}
</script>
<style scoped>
.btnSty {
  margin: 0 auto;
  width: 30%;
  display:flex;
  justify-content: space-around;
}
</style>
